<header class="navbar navbar-static-top custom_nav" v-cloak>
	<div class="container">
	<div class="navbar-header">
		<a class="navbar-brand" href="/">外卖订餐</a>
	</div>
	<nav class="collapse navbar-collapse" id="bs-navbar">
		<!--已登录-->
		<template v-if="isLogged">
			<ul class="nav navbar-nav" v-if="userBaseInfo.role===0">
				<li><a href="/userCenter">我的外卖</a></li>
				<li><a href="/openShop">店铺入驻</a></li>
			</ul>
			<ul class="nav navbar-nav" v-if="userBaseInfo.role===1">
				<li><a href="/userCenter">我的外卖</a></li>
				<li><a href="/myShop">我的店铺</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a>{{userBaseInfo.name}}</a></li>
				<li><a @click="logout">登出</a></li>
			</ul>
		</template>
		<ul class="nav navbar-nav navbar-right" v-else="isLogged">
			<li><a href="{{loginPath}}">登录</a></li>
			<li><a href="/register">注册</a></li>
		</ul>
	</nav>
	</div>
</header>
<script>
	require(['jquery','token','common/data'], function($,token,syncData) {
		var header = new Vue({
			el: '.custom_nav',
			data:syncData.fetch({url:'/api/userBaseInfo'}),
			computed: {
				// 一个计算属性的 getter
				loginPath: function () {
					return '/login?redirectUrl='+encodeURIComponent(window.location.href);
				}
			},
			methods:{
				logout:function(){
					$.ajax({
						url:'/logout',
						method:'post',
						success:function(data){
							if(data.success){
								token.clear();
								window.location.href='/';
							}

						}
					})
				}
			}
		})
	});
</script>